<template>
	<view>
		
		
		<!-- 完善用户信息 -->
		<luPopupWrapper ref="userPop" type="bottom" transition="slider" backgroundColor="#fff" :active="active" height="50%"
		 width="100%" maskShow maskClick :closeCallback="showtabbar">
			<view class="popwrap" style="width: 100%;height: 100%;">
				<view class="sharewrap">
					<view class="wrap">
						<view class="position">
							<!-- #ifdef MP-WEIXIN -->
							<button class="share-btn" open-type="share"></button>
							<!-- #endif -->
							<image src="../../static/wx.png"></image>
							<view>分享给好友</view>
						</view>
						<view @tap="onposter">
							<image src="../../static/circle.png"></image>
							<view>分享海报到朋友圈</view>
						</view>
					</view>
				
					<!-- 复制区域 -->
					<view class="mian">
						<!-- appid -->
						<view class="appid">
							<view class="title">六年免检标签小程序ID</view>
							<view class="app">
								<view class="left">
									<view class="input">wx71a8321cfd70a12e</view>
								</view>
								<view class="right">
									<view @tap="copy(1)">复制ID</view>
								</view>
							</view>
				
						</view>
				
						<!-- 链接 -->
						<view class="link">
							<view class="title">我的专属链接</view>
							<view class="app">
								<view class="left">
									<view class="input">{{link}}</view>
								</view>
								<view class="right">
									<view @tap="copy(2)">复制链接</view>
								</view>
							</view>
						</view>
					</view>
					
					
					
					
					<view class="reward">
						<view class="title">
							奖励规则
						</view>
						<view class="text">
							推荐用户下单,直接推荐人奖励5元上不封顶,多推多得!
						</view>
					</view>
				</view>
				
			</view>
		</luPopupWrapper>
		
		
		

		<view class="header">

			<view class="userinfo" v-if="userinfo==null">

				<!-- #ifdef MP-WEIXIN -->
				<button class="getuser" lang="zh_CN" open-type="getUserInfo" @getuserinfo="wxGetUserInfo" withCredentials="true">微信授权获取用户信息</button>
				<!-- #endif -->

				<view class="headportrait">
					<view class="fonticon" style="font-size: 120rpx;">&#xe62b;</view>
				</view>
				<view class="username">
					点击登录
				</view>
			</view>

			<view class="userinfo" v-else>
				<view class="headportrait avatarUrl">
					<image :src="userinfo.avatarurl"></image>
				</view>
				<view class="username1">
					{{userinfo.nickname}}
				</view>
			</view>

		</view>

		<view class="menu">
			<view class="menuposition">
				<view class="menuwrap">
					<view class="border" @tap="nav('../order/order')">
						<view class="item">

							<view class="fonticon" style="font-size: 60rpx; color: #0081FF;">
								&#xe63e;
							</view>

							<view>我的订单</view>
						</view>
						<view class="num">{{ordernum}}</view>
					</view>


					<view @tap="nav('../wallet/wallet')">
						<view class="item">
							<view class="fonticon" style="font-size: 60rpx; color: #0081FF;">
								&#xe615;
							</view>
							<view>我的钱包</view>
						</view>
						<view class="num">{{price}}</view>
					</view>
				</view>
			</view>
		</view>

		<uni-list>
			<uni-list-item @click="nav('../recommend/recommend')" title="我的推荐" thumb="../../static/recommend.png"></uni-list-item>
			<uni-list-item @click="share" title="邀请朋友" thumb="../../static/friend.png"></uni-list-item>

			<uni-list-item @click="nav('../withdrawal/withdrawal')" title="提现申请" thumb="../../static/withdrawal.png"></uni-list-item>
			<uni-list-item @click="phone" title="客服电话" thumb="../../static/phone.png"></uni-list-item>
		</uni-list>

		<!-- 海报图片 -->
		<view :class="[isposter ? 'block' : 'none' ]">
			<poster ref="poster"></poster>
		</view>



	</view>
</template>

<script>
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	import luPopupWrapper from "@/components/lu-popup-wrapper/lu-popup-wrapper.vue"

	import poster from '../../components/zywPoster.vue';

	import _function from '@/common/_function.js'
	import api from '@/common/api.js'

	export default {
		components: {
			uniList,
			uniListItem,
			poster,
			luPopupWrapper
		},
		data() {
			return {
				// isshare: false,
				userinfo: null, //用户信息
				price: 0.00, //钱包余额
				ordernum: 0, //用户的订单数
				isposter: false, //控制海报显示隐藏
				posterbg: '', //海报背景
				postercode: '', //小程序二维码

				link: ''
			};
		},
		methods: {

			// 复制内容
			copy(i) {
				// i =1 代表复制appid i=2 代表复制链接
				let content = ''
				if (i == 1) {
					content = wx.getAccountInfoSync().miniProgram.appId
				} else {
					content = this.link
				}
				uni.setClipboardData({
					data: content,
					success: function() {
						uni.showToast({
							title: '复制成功！',
							duration: 2000
						})
					}
				})
			},

			// 生成海报
			async onposter() {


				uni.showLoading({
					title: '绘制海报中...',
					mask: true
				})
				// 获取海报图片
				const res = await _function.request(api.getWxcode)
				

				if (res.data.code == 200) {
					console.log(res.data.data.posterbg)
					this.isposter = true
					// 调用组件方法 传入背景图和二维码
					this.$refs.poster.creatposter(res.data.data.posterbg, res.data.data.postercode);
					
					this.$refs.userPop.close()
					this.showtabbar()
					
				} else {
					uni.showToast({
						title: '海报绘制失败',
						duration: 2000
					})
				}
				

			},

			async getlogin() {
				const res = await _function.request(api.getuserinfo)
				console.log(res)
				if (res.data.code == 200) {

					this.userinfo = res.data.data.userinfo
					this.ordernum = res.data.data.ordernum
					this.price = res.data.data.userinfo.price
					
					this.link = `pages/index/index?pid=${this.userinfo.id}`
				} else {
					uni.showToast({
						title: '请重新登录',
						duration: 2000,
						icon: 'none'
					})

					console.log(this.userinfo)
				}
			},
			// 客服电话
			async phone() {
				const res = await _function.request(api.getphone)
				if (res.data.code == 200) {
					uni.makePhoneCall({
						phoneNumber: res.data.data //仅为示例
					})
				} else {
					uni.showToast({
						title: '服务器错误',
						duration: 2000,
						icon: 'none'
					})
				}

			},
			// 点击分享
			async share() {
				if (getApp().globalData.islogin) {
					// this.isshare = true
					let [err, succ] = await uni.hideTabBar({
						animation: true,
					})
					this.$refs.userPop.show()
				} else {
					uni.showToast({
						title: '请先登录',
						duration: 2000,
						icon: 'none'
					})
				}

			},

			// 显示tabbar
			async showtabbar() {
				
				let [err, succ] = await uni.showTabBar({
					animation: true,
				})
			},


			async wxGetUserInfo(e) {
				
				if (e.detail.iv || e.detail.signature) {
					
					const bol = await _function.login(e.detail.userInfo)
					// ture 表示登录成功 false表示登录失败

					if (bol) {

						this.getlogin()
						getApp().globalData.islogin = true
						
					}

				} else {
					console.log('接口调用失败')
				}
			},

			// 跳转页面
			nav(url) {
				if (getApp().globalData.islogin) {
					uni.navigateTo({
						url
					})
				} else {
					uni.showToast({
						title: '请先登录',
						duration: 2000,
						icon: 'none'
					})
				}
			}
		},


		onLoad() {
			this.getlogin()
			
		},

		onShow() {
			this.link = `pages/index/index?pid=${getApp().globalData.uid}`
		},
		//分享
		onShareAppMessage(res) {
			let imageUrl = getApp().globalData.shareimg || "../../static/share.jpg"
			return {
				title: getApp().globalData.sharetext||'车友有福了,小程序一键办理全国六年免检,快递到家',
				path: `pages/index/index?pid=${this.userinfo.id}`,
				imageUrl
			}
		}
	}
</script>

<style lang="scss">
	.header {
		height: 360rpx;
		background-color: #0081FF;

		display: flex;

		align-items: center;
		padding-left: 40rpx;
		box-sizing: border-box;

		.userinfo {
			position: relative;

			display: flex;
			align-items: center;

			color: #fff;
			box-sizing: border-box;

			// 获取用户信息的弹窗
			.getuser {
				position: absolute;
				top: 0;
				width: 100%;
				height: 100%;
				opacity: 0;
			}

			.headportrait {
				display: flex;
				justify-content: center;
				align-content: center;
				border-radius: 50%;
				overflow: hidden;
			}

			.username {
				font-size: 36rpx;
				margin-left: 20rpx;
				padding: 6rpx 14rpx;
				border: 2rpx solid #C5CAD5;
				border-radius: 10rpx;
			}

			.username1 {
				font-size: 36rpx;
				margin-left: 20rpx;
			}

			.avatarUrl {
				width: 120rpx;
				height: 120rpx;
				border: 6rpx solid #fff;
			}
		}
	}

	.menu {
		padding: 0 40rpx;
		height: 100rpx;

		.menuposition {
			position: relative;

			.menuwrap {
				position: absolute;
				top: -80rpx;
				height: 160rpx;
				width: 100%;
				border-radius: 6rpx;
				box-shadow: 2rpx 2rpx 6rpx #C8C7CC;
				padding: 20rpx;
				box-sizing: border-box;
				display: flex;
				background-color: #fff;

				&>view {
					padding: 0 30rpx;
					display: flex;
					justify-content: space-around;
					align-items: center;
					width: 50%;
					height: 100%;
					box-sizing: border-box;
				}

				.item {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					font-size: 22rpx;
					color: #999;

				}

				.num {
					font-size: 46rpx;
				}

				.border {
					border-right: 2rpx solid #C0C0C0;
				}
			}
		}
	}

	.position {
		position: relative;

		.share-btn {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			z-index: 999;
		}
	}


	.sharewrap {
		height: 100%;
		padding: 20rpx 0;

		
		box-sizing: border-box;

		background-color: #fff;

		.wrap {
			width: 100%;
			display: flex;
			justify-content: space-around;
			align-items: center;
			height: 30%;
			box-sizing: border-box;

			view {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				font-size: 26rpx;
				width: 45%;

				image {
					width: 70rpx;
					height: 70rpx;
				}

				view {
					width: 100%;
				}
			}
		}

		.mian {
			height: 240rpx;
			display: flex;
			justify-content: space-between;
			flex-direction: column;


			&>view {
				.title {
					width: 60%;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 10rpx;
				}

				.app {
					display: flex;
					justify-content: center;
					align-items: center;

					.left {
						width: 60%;
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;

						.input {
							width: 70%;
							padding: 10rpx 20rpx;
							border: 1rpx solid #dedede;
							border-radius: 10rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

					}

					.right {
						width: 40%;
						display: flex;
						justify-content: center;
						align-items: center;

						&>view {
							width: 160rpx;
							height: 60rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							background-color: #007AFF;
							color: #fff;
							border-radius: 10rpx;
						}
					}
				}

			}

		}

		.clear {
			width: 100%;
			height: 18%;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 38rpx;
			letter-spacing: 20rpx;
			color: #C0C0C0;
		}

	}

	
	.reward{
		margin-top:40rpx;
		padding: 0 40rpx;
		text-align: center;
		.title{
			font-size: 30rpx;
			margin-bottom: 10rpx;
		}
		
	}
	
	.block {
		display: block;
	}

	.none {
		display: none;
	}
</style>
